@mixin date-range-picker-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    .md-drppicker {
        background-color: mat-color($background, dialog);
        color: mat-color($foreground, text);

        td,
        th {
            &.available {
                &:hover {
                    background-color: mat-color($background, hover);
                    color: mat-color($foreground, text);
                }
            }
        }

        td {
            &.off {
                &,
                &.in-range,
                &.start-date,
                &.end-date {
                    background-color: mat-color($background, dialog);
                    border-color: mat-color($background, dialog);
                    color: mat-color($foreground, disabled);
                }
            }

            &.in-range {
                background-color: mat-color($background, disabled-list-option);
                border-color: mat-color($background, disabled-list-option);
                color: mat-color($foreground, text);
            }

            &.active {
                transition: background 300ms ease-out, border 300ms ease-out;
                background: rgba(0, 0, 0, 0.1);
                &,
                &:hover {
                    background-color: mat-color($primary);
                    color: mat-color($primary, default-contrast);
                }
            }
        }

        .ranges {
            ul {
                li {
                    button {
                        border-radius: 4px;
                        color: mat-color($foreground, text);

                        &.active {
                            background-color: mat-color($primary);
                            color: mat-color($primary, default-contrast);
                        }
                    }

                    &:hover {
                        border-radius: 4px;
                        background-color: mat-color($background, hover);
                        color: mat-color($primary, default-contrast);
                    }
                }
            }
        }

        .calendar-icon::after {
            border-color: mat-color($foreground, text);
        }
    }
}
